<template>
  <panel title="车位资源使用统计">
    <div class="mr20 ml20">
      <x-row>
        <x-col :span="24">
          <pie :width="chartWidth" :height="chartHeight" :options="chartOptions"></pie>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'MaintenanceOrder',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        series: [{
          data: [
            {value: 335, name: '已用车位'},
            {value: 310, name: '预留车位'},
            {value: 234, name: '剩余车位'},
            {value: 135, name: '临时车位'}
          ]
        }]
      }
    }
  }
}
</script>
